<script setup>
/**
 * 联系人列表 非常态显示
 * 左侧联系人按钮点击后显示
 */
import { useSearchStore } from '@/stores/useSearchStore.js'
import { watch, ref, onMounted } from 'vue'
import { useEventBus } from '@/stores/useEventBus.js'
import SearchUserListBox from './components/SearchUserListBox.vue'
import SearchToOtherListBox from './components/SearchToOtherListBox.vue'
import SearchToSelfListBox from '@/views/LeftSetBar/contact/components/SearchToSelfListBox.vue'
import ContactListBox from '@/views/AddUserGroup/ContactListBox.vue'
import { searchAPI } from '@/api/searchAPI.js'
import { findOtherSendToSelfAPI, getMyContactsAPI,findSelfSendToOtherAPI } from '@/api/contactsAPI.js'

const eventBus = useEventBus().bus
const searchStore = useSearchStore()

const loading = ref(true) //加载状态 初始应为false
const searchValue = ref() //搜索获取的联系人
const contactList = ref([]) //我的联系人列表
const isSendList = ref([]) //我发给别人的
const newContactsList = ref([]) //别人发个我的

eventBus.on('agree', () => {
    getNewContactsList()
    getMyContacts()
})

/**
 * 搜索用户 根据用户名
 */
const getSearchUser = async (value) => {
    const res = await searchAPI(value)
    console.log('搜索结果：', res.data)
    searchValue.value = res.data
}

/**
 * 获取联系人列表
 */
const getMyContacts = async () => {
    const res = await getMyContactsAPI()
    contactList.value = res.data.data
    console.log('获取联系人列表: ', contactList.value)
}

/**
 * 获取 新联系人 别人发给我的
 */
const getNewContactsList = async () => {
    const res = await findOtherSendToSelfAPI()
    if (res.data.code === 1) {
        newContactsList.value = res.data.data
        console.log('新联系人(别人发给我): ', newContactsList.value)
    } else {
        console.log('获取新联系人失败')
    }
}

/**
 * 获取 已发邀请 我发给别人的
 */
const getAddUserList = async () => {
    const res = await findSelfSendToOtherAPI()
    if (res.data.code === 1) {
        isSendList.value = res.data.data
        console.log('获取已发请求(我发给别人): ', isSendList.value)
    } else {
        console.log('获取已发请求失败')
    }
}

watch(
    //监听头部组件input输入
    () => searchStore.massage,
    (newVal) => {
        if (newVal.length > 2) {
            getSearchUser(newVal)
        } else {
            searchValue.value = ''
        }
    },
)

onMounted(() => {
    getAddUserList()
    getNewContactsList()
    getMyContacts()
})
</script>

<template>
    <div v-if="!loading">加载中...</div>
    <div v-else>
        <div v-if="searchValue">
            <div style="text-align: center">搜索</div>
            <div v-for="item in searchValue">
                <SearchUserListBox
                    :headImgUrl="item.headImgUrl"
                    :id="item.id"
                    :username="item.username"
                    :isContact="item.isContact"
                />
            </div>
        </div>
        <div>
            <div style="text-align: center">新联系人</div>
            <div v-if="newContactsList.length === 0" class="noMessage">无新联系人</div>
            <div v-for="item in newContactsList">
                <SearchToSelfListBox
                    :id="item.id"
                    :username="item.username"
                    :headImgUrl="item.headImgUrl"
                />
            </div>
        </div>
        <div>
            <div style="text-align: center">已发送邀请</div>
            <div v-if="isSendList.length === 0" class="noMessage">无已发送邀请</div>
            <div v-for="item in isSendList">
                <SearchToOtherListBox
                    :id="item.id"
                    :username="item.username"
                    :headImgUrl="item.headImgUrl"
                />
            </div>
        </div>
        <div v-if="contactList">
            <div style="text-align: center">我的联系人</div>
            <div v-if="contactList.length === 0" class="noMessage">无已发送邀请</div>
            <div v-for="item in contactList">
                <ContactListBox
                    :headImgUrl="item.headImgUrl"
                    :id="item.id"
                    :username="item.username"
                />
            </div>
        </div>
    </div>
</template>

<style scoped>
.noMessage {
    text-align: center;
    color: rgb(177.3, 179.4, 183.6);
    height: 30px;
    line-height: 30px;
}
</style>
